<template>
    <div id="tmpl">
        <mt-header fixed title="没事多笑笑"></mt-header>
        <!-- 1. 使用mint-ui实现 swipe轮播图 -->
        <div class="content-box">
            <mt-swipe :auto="5000">
                <!-- 变量声明之后要使用 （item, index）==> item  在组件中如果使用 v-for 一定要指定  key -->
                <mt-swipe-item v-for="item in list.imgs.image" :key="item.id">
                    <!-- :key="item.createdAt" key用来定义该条数据的唯一性 -->
                    <!-- <img :src="item.img" alt :id="item.id" :onerror="item.defaultImg" /> -->
                    <img
                        :src="item.img"
                        alt
                        :id="item.id"
                        onerror="this.onerror=null; this.src='http://woxin2.jx139.com/cztx/images/ic_default_head.png'"
                    />
                </mt-swipe-item>
            </mt-swipe>

            <!-- 2. 利用mui的9宫格来实现导航区 -->
            <div class="mui-content">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">
                        <router-link to="/home/videolist">
                            <span class="mui-icon mui-icon-video"></span>
                            <div class="mui-media-body">看会儿视频</div>
                        </router-link>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">
                        <router-link to="/home/photolist">
                            <span class="mui-icon mui-icon-pic"></span>
                            <div class="mui-media-body">赏会儿美女</div>
                        </router-link>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">
                        <router-link to="/home/musiclist">
                            <span class="mui-icon mui-icon-music"></span>
                            <div class="mui-media-body">听会儿音乐</div>
                        </router-link>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">
                        <router-link to="/home/newslist">
                            <span class="mui-icon mui-icon-world"></span>
                            <div class="mui-media-body">看看世界</div>
                        </router-link>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">
                        <router-link to="/home/feedbacklist">
                            <span class="mui-icon mui-icon-talksomething"></span>
                            <div class="mui-media-body">别瞎哔哔</div>
                        </router-link>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">
                        <router-link to="/home/callmelist">
                            <span class="mui-icon mui-icon-phone"></span>
                            <div class="mui-media-body">给我打call</div>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: {
                imgs: {
                    image: [],
                    spareImg: [],
                    defaultImg:
                        'this.src="' + require("../imgs/defaultImg.png") + '"'
                }
            }
        };
    },
    methods: {
        getimgData() {
            // 实现轮播组件中的数据请求
            // 1. 确定  url
            // console.log(str);
            let url = this.$api + "/getImages";
            // 2. 调用  $http.get()
            this.$http.get(url, { headers: {} }).then(function(res) {
                let data = res.body;
                let arr = [];
                if (data.code != 200) {
                    this.$toast({
                        message: data.message,
                        position: "middle", // top middle bottom
                        duration: 2000
                    });
                    return; // 报错之后阻断后面代码运行
                } else {
                    this.$toast({
                        message: "数据加载" + data.message,
                        position: "middle", // top middle bottom
                        duration: 2000 // 消息显示时间
                    });
                }
                // 如果服务器返回的数据正常，则赋值给 list.img
                for (var i = 0; i < data.result.length; i++) {
                    if (data.result[i].img.indexOf("7xi8d6.com1") == -1) {
                        arr.push(data.result[i]);
                        if (arr.length == 5) {
                            break; // 跳出循环
                        }
                    }
                }
                this.list.imgs.image = arr;
                // 备用图片
                this.list.imgs.spareImg = data.result.slice(5, 10);
            });
        },
        getImgs(data) {
            var Illegalpic = document.getElementsByClassName("mint-swipe-item");
            for (var i = 0; i < Illegalpic.length; i++) {
                if (
                    Illegalpic[i].children[0].src.indexOf("7xi8d6.com1") != -1
                ) {
                    console.log(Illegalpic[i].children[0].src);
                }
            }
            console.log("=----------------------defaultImg.png");
        }
    },
    created() {
        // 当页面中的 data 和 methods 对象都创建完毕后，就会自动调用 created
        this.getimgData();
    },
    beforeMount() {},
    mounted() {},
    beforeUpdate() {
        // 有数据，在数据渲染之前调用
    },
    updated() {
        // 有数据，在渲染之后调用
        // this.getImgs();
    },
    beforeDestroy() {},
    destroyed() {}
};
</script>

<style lang="less" scoped>
.mint-header {
    box-shadow: none;
    -o-box-shadow: none;
    -ms-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
.pic_url {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
}
.mint-swipe-item[data-v-20b90b36] {
    height: 200px;
}
.mint-swipe {
    height: 200px;
}
.mint-swipe-item {
    background-color: rgb(233, 233, 233);
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 300px;
    img {
        widows: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        display: inline-block;
    }
}
.mui-content > .mui-table-view:first-child {
    background-color: #fff;
    margin-top: 0px;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border: none;
}
.mui-grid-view.mui-grid-9 {
    border: none;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
    font-size: 12px;
    margin-top: 0;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn) {
    padding: 0;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
    padding-top: 10px;
    padding-bottom: 10px;
}
.mui-icon-world:before,
.mui-icon-pic:before,
.mui-icon-music:before,
.mui-icon-talksomething:before,
.mui-icon-video:before,
.mui-icon-phone:before {
    content: "";
    background-repeat: round; /* 图片自动平铺在整个元素内 平铺时会缩放（不等比）  不会被裁切 */
    display: block;
    width: 50px;
    height: 50px;
}
.mui-icon-world:before {
    background-image: url(../imgs/1.png);
}
.mui-icon-pic:before {
    background-image: url(../imgs/2.png);
}
.mui-icon-music:before {
    background-image: url(../imgs/3.png);
}
.mui-icon-talksomething:before {
    background-image: url(../imgs/4.png);
}
.mui-icon-video:before {
    background-image: url(../imgs/5.png);
}
.mui-icon-phone:before {
    background-image: url(../imgs/6.png);
}
.mui-bar-tab .mui-tab-item {
    color: white;
}
.mui-bar {
    background-color: #26a2ff;
}
</style>
